<template>
	<picker style="width: 100%;height: 100%;display: flex;align-items: center;" @change="change" :value="valueIndex" :range="range" :range-key="name">{{range[valueIndex][name]}}</picker>
</template>

<script>
	export default{
		name:'NormalPicker',
		data(){
			return{
				rangeData:[],
				valueIndex:0,
			}
		},
		props:{
			range:{
				type:Array,
				default:()=>[]
			},
			name:{
				type:String,
				default:'name',
			},
			value:{
				type:Number,
				default:0
			}
		},
		watch:{
			range:{
				handler(val){
				},
				immediate:true
			},
			value:{
				handler(val){
					this.initSelect(this.range);
				},
				immediate:true
			}
		},
		methods:{
			change(e){
				let value=e.detail.value;
				this.valueIndex=value
				this.$emit('selected',this.range[this.valueIndex].id);
			},
			initSelect(data){
				for(let i=0;i<data.length;i++){
					if(data[i].id==this.value){
						this.valueIndex=i;
						break;
					}
				}
			}
		}
	}
</script>

<style>
</style>